<template>
	<div class="sidebar">
		<el-menu
		  :default-active="onRoutes"
			active-text-color="#ffd04b"
			background-color="#324157"
			text-color="#fff"
		  class="el-menu-vertical-demo"
		  :collapse="isCollapse"
		  @open="handleOpen"
		  @close="handleClose"
		  :router="true"
		>
			<el-menu-item index="/enterprise/index">
			<el-icon><HomeFilled /></el-icon>
			<template #title>首页</template>
			</el-menu-item>
			<el-menu-item index="/enterprise/job">
			<el-icon><Platform /></el-icon>
			<template #title>职位管理</template>
			</el-menu-item>
      <el-menu-item index="/enterprise/messge">
        <el-icon><ChatDotSquare /></el-icon>
			<template #title>消息管理</template>
			</el-menu-item>
		</el-menu>
	</div>
</template>

<script setup>
	import { ref,computed,onMounted,reactive } from 'vue'
	import { useStore } from "vuex";
	import { useRoute } from "vue-router";
	import {
	  Document,
	  Fold,
	  Expand,
	  HomeFilled,
	  Menu as IconMenu,
	  Location,
	  Setting,
	  Platform,
    ChatDotSquare
	} from '@element-plus/icons-vue'
	const store = useStore();
	const route = useRoute();
	const props = defineProps();
	const isCollapse = computed(() => store.state.isCollapse);
	const onRoutes = computed(() => {return route.path;});
	const handleOpen = (key, keyPath) => {
	  // console.log(key, keyPath)
	}
	const handleClose = (key, keyPath) => {
	  // console.log(key, keyPath)
	}
	onMounted(()=>{
	})
</script>

<style lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu{border: 0;}
.sidebar{
	position: fixed;
	left:0;top:70px;z-index: 9999;
	height: 100%;background-color: #324157;
}
</style>